<!-- App.vue -->
<template>
  <div id="app">
    <!-- hideLayout === true 时不显示 Header 和 Sidebar -->
    <template v-if="!hideLayout">
      <el-header class="header">
        <Header />
      </el-header>
      <el-container class="container">
         <vxe-layout-aside :width="sidebarWidth" :collapsed="isCollapse">
          <Sidebar @update:collapse="handleCollapse" />
         </vxe-layout-aside>
        <el-main class="main">
          <!-- 使用封装的面包屑组件 -->
          <Breadcrumb />
          <Tags />
          <router-view class="pad-14" />
        </el-main>
      </el-container>
    </template>
    <router-view v-else />
  </div>
</template>

<script setup lang="ts">
import { ref, computed,onMounted } from "vue";
import { useRoute } from "vue-router";
import Header from "./components/Header.vue";
import Sidebar from "./components/Sidebar.vue";
import Breadcrumb from "./components/Breadcrumb.vue"; 
import Tags from "./components/Tags.vue";

const isCollapse = ref(false);
const sidebarWidth = ref("200");

const handleCollapse = (collapsed: boolean) => {
  isCollapse.value = collapsed;
  sidebarWidth.value = collapsed ? "160" : "200";
};

const route = useRoute();

onMounted(()=>{
})
// 判断是否隐藏布局
const hideLayout = computed(() => {
  return route.meta.hideLayout === true;
});
</script>

<style lang="scss" scoped>
.header {
  background: var(--color-theme);
  display: grid;
}

.container {
  height: calc(100vh - 60px);
  border: 1px solid #eee;

  .el-aside {
    color: #fff;
    transition: width 0.3s ease;
  }

  .main {
    background: #f6f7f8;
    padding: 0;
    height: 100%;
  }
}
</style>